<template>
  <ContentWrap
    class="mb-0!"
    :class="[
      footer
        ? '!h-[calc(80vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-10px)]'
        : '!h-[calc(80vh-var(--top-tool-height)-var(--tags-view-height)-20px)]'
    ]"
    :bodyStyle="{ height: '100%', paddingLeft: '5px', paddingRight: '5px' }"
  >
    <div class="flex flex-col !h-full">
      <div class="flex">
        <slot name="tool"></slot>
      </div>
      <el-scrollbar>
        <el-row
          :gutter="5"
          class="m-x-0!"
          v-infinite-scroll="load"
          :infinite-scroll-immediate="false"
          v-if="list.length > 0"
          ><el-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="4"
            v-for="(item, index) in list"
            :key="index"
            class="spuItem"
          >
            <SpuItem :spuItem="item">
              <template #itemButton>
                <el-button class="mt-10px w-100%" type="primary" @click="handleBuy(item)">
                  赠送
                </el-button>
              </template>
            </SpuItem>
          </el-col>
        </el-row>
        <div class="h-full flex flex-col justify-center" v-if="list.length == 0">
          <Empty />
        </div>
      </el-scrollbar>
    </div>
  </ContentWrap>
</template>
<script lang="ts" setup>
defineOptions({ name: 'GiveGoodsList' })

import { propTypes } from '@/utils/propTypes'
const emit = defineEmits(['handleBuy', 'load'])
const load = () => {
  emit('load')
}
defineProps({
  // 选中的列表
  list: propTypes.arrayOf(propTypes.object).def([])
})
import SpuItem from './SpuItem.vue'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const footer = computed(() => appStore.getFooter)
const handleBuy = (item: any) => {
  emit('handleBuy', item)
}
</script>
